﻿<%@ Page Title="" Language="C#" MasterPageFile="~/DataTables.master" AutoEventWireup="true" CodeBehind="TableDemo.aspx.cs" Inherits="GA.Framework.WebDemo.TableDemo" %>
<asp:Content ID="Content1" ContentPlaceHolderID="DataTablesHead" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="DataTablesBody" runat="server">
<div class="w_fluid">
     <div class="w_block">
          <div class="w_blockTitle">1.介绍和说明</div>
          <div class="w_content"></div>
     </div>
     <div class="w_block">
          <div class="w_blockTitle">2.展示</div>
          <div class="w_content">
          <table id="myDataTable">
          </table>
          </div>
     </div>
     <br />
     <br />
     <div class="w_block">
          <div class="w_blockTitle">3.使用的代码</div>
          <div class="w_content">
            <pre>
             $(
function () {
    $("#myDataTable").DataTable({
        "bPaginate": true,
        "oLanguage":oLanguageDefault,
        "sPaginationType": "full_numbers",
        "bSort": true,
        "sAjaxSource": 'Handlers/TableDemoHandler.ashx',
        "bProcessing": true,
        "bServerSide": true, //若从后台取数据，必须为true
        "aoColumns": [
        //aoColumnDefs   (aoColumns 可用null)  这是奖列绑到数据上，所以超过数据的列数会报错    
            {"aTargets": [0], "sTitle": "StaffId", "aDataSort": [0], "asSorting": ["asc","desc"],
             "bSearchable": false }, //"bVisible": false  
            {"aTargets": [1], "sTitle": "Dept_Id", "aDataSort": [1, 3, 2], "asSorting": ["desc", "asc", "asc"],
             "bSearchable": false, "bSortable": false },
            { "aTargets": [2], "sTitle": "UserName", "aDataSort": [2], "asSorting": ["asc", "desc"], 
            "bSortable": true, "bSearchable": false },
            { "aTargets": [4], "sTitle": "User_Code", "aDataSort": [2], "asSorting": ["asc"],
             "bSortable": false, "bSearchable": false },
        //{ "aTargets": [5], "sTitle": "空值", "bSortable": false, "bSearchable": false,mDataprop:null }, 
        //mDataprop:null
            {"aTargets": [3], "sTitle": "Name", "aDataSort": [3], "asSorting": ["asc"], "bSortable": false,
             "bSearchable": false },
            { mDataProp: null, "sTitle": "自己加的列" },
            { mDataProp: null, "sTitle": "按钮列" }
            ],
        "fnServerData": fnServerDataDefaultWithDate,
        "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            /* Append the grade to the default row class name */
            if (aData[0] < 12) {
                $('td:eq(0)', nRow).html($("< input>", { type: "checkbox", val: aData[0] }).after($("< span>",
                 { text: aData[3] })));
                //$('td:eq(0)', nRow).append($("< span>", { text: aData[3] }));
            }
            $('td:eq(2)', nRow).wrapInner($("< a>", {herf:"###",style:"cursor:hand;"}));

            $('td:eq(6)', nRow).html($("< input>", { type: "button", val: "增加", onclick: function () {
                $(this).val("我变了！")
            }
            }));

        }

    }); //end of DataTable
}
);
            </pre>
          </div>
     </div>
     <div class="w_block">
          <div class="w_blockTitle">4.注意事项</div>
          <div class="w_content"></div>
     </div>
     <div class="w_block">
          <div class="w_blockTitle">5.参考资料</div>
          <div class="w_content"></div>
     </div>
     <div class="w_block">
          <div class="w_blockTitle">6.意见反馈</div>
          <div class="w_content"></div>
     </div>
</div>


<script type="text/javascript">
    $(
function () {
    $("#myDataTable").DataTable({
        "bPaginate": true,
        "oLanguage":oLanguageDefault,
        "sPaginationType": "full_numbers",
        "bSort": true,
        "sAjaxSource": 'Handlers/TableDemoHandler.ashx',
        "bProcessing": true,
        "bServerSide": true, //若从后台取数据，必须为true
        "aoColumns": [//aoColumnDefs   (aoColumns 可用null)  这是奖列绑到数据上，所以超过数据的列数会报错    
            {"aTargets": [0], "sTitle": "StaffId", "aDataSort": [0], "asSorting": ["asc","desc"], "bSearchable": false }, //"bVisible": false  
            {"aTargets": [1], "sTitle": "Dept_Id", "aDataSort": [1, 3, 2], "asSorting": ["desc", "asc", "asc"], "bSearchable": false, "bSortable": false },
            { "aTargets": [2], "sTitle": "UserName", "aDataSort": [2], "asSorting": ["asc", "desc"], "bSortable": true, "bSearchable": false },
            { "aTargets": [4], "sTitle": "User_Code", "aDataSort": [2], "asSorting": ["asc"], "bSortable": false, "bSearchable": false },
        //{ "aTargets": [5], "sTitle": "空值", "bSortable": false, "bSearchable": false,mDataprop:null }, //mDataprop:null
            {"aTargets": [3], "sTitle": "Name", "aDataSort": [3], "asSorting": ["asc"], "bSortable": false, "bSearchable": false },
            { mDataProp: null, "sTitle": "自己加的列" },
            { mDataProp: null, "sTitle": "按钮列" }
            ],
        "fnServerData": fnServerDataDefaultWithDate,
        "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            /* Append the grade to the default row class name */
            if (aData[0] < 12) {
                $('td:eq(0)', nRow).html($("<input>", { type: "checkbox", val: aData[0] }).after($("<span>", { text: aData[3] })));
                //$('td:eq(0)', nRow).append($("<span>", { text: aData[3] }));
            }
            $('td:eq(2)', nRow).wrapInner($("<a>", {herf:"###",style:"cursor:hand;"}));

            $('td:eq(6)', nRow).html($("<input>", { type: "button", val: "增加", onclick: function () {
                $(this).val("我变了！")
            }
            }));

        }

    }); //end of DataTable
}
);

</script>
</asp:Content>
